import React, { Component } from 'react';
import {
  View,
  Text,
  FlatList,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Dimensions,
  Animated, Image
} from 'react-native';

const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
import { getImgUrl, getCarRegisterDate, getMileFormat, getPriceFormat, getStoreStatus, getSaleStatus, getCheckStatus, formatTimestamp } from '../../utils/ComFunction';

import HttpUtils from "../../utils/HttpUtils";
import HttpUrls from "../../utils/HttpUrls";
import Constant from '../../utils/Constant'
import { ToastToUser } from '../../utils/CustomToast';
import { getMsgContentShow } from "../../utils/ComFunction";
import { OrderStatus } from '../../utils/Enum'

class ConfirmPayPop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      loading: false,
      pageNo: 1,
      modalAnimation: new Animated.Value(0),
      isEnableLoadMore: true,
      buyerReason: ['不想要了', '卖家无车', '已协商一致'],
      sellerReason: ['车主已另卖', '不想卖了', '已协商一致'],
      showReason: [],
      selectIndex: -1,
      orderStatus: this.props.orderStatus,
      showReasonPop: false
    };
  }

  componentDidMount() {
    

    if (Constant.userInfo.isFranchisee == 1) {
      this.setState({
        showReason: this.state.sellerReason
      })
    } else {
      this.setState({
        showReason: this.state.buyerReason
      })

    }
    this.animateIn();

  }

  componentDidUpdate(prevProps) {
    if (this.props.visible && !prevProps.visible) {
      this.animateIn();
    } else if (!this.props.visible && prevProps.visible) {
      this.animateOut();
    }

    // console.log('componentDidUpdate', prevProps)
  }

  animateIn = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };

  animateOut = () => {
    Animated.timing(this.state.modalAnimation, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };





  render() {
    const translateY = this.state.modalAnimation.interpolate({
      inputRange: [0, 1],
      outputRange: [SCREEN_HEIGHT, 0],
    });

    return (
      <View style={styles.modalContainer}>
        <TouchableOpacity
          style={styles.overlay}
          activeOpacity={1}
          onPress={this.props.onClose}
        />
        <Animated.View
          style={[
            styles.contentContainer,

            { transform: [{ translateY }] }
          ]}
        >
          <View style={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}>
            <Image style={styles.tipsImg} source={require('source/image/comm/warn_icon.png')}></Image>
          </View>

          <Text style={[styles.title, {textAlign: 'center', lineHeight:24,}]}>请确认过户手续齐全并车辆状态正常，再支付尾款</Text>
 

          <View style={styles.bottomBtnContain}>
            <TouchableOpacity
              style={[styles.bottomBtn,{backgroundColor:'#F5F5F5'}]}
              onPress={this.props.onClose}>
                <Text style={styles.bottomBtnText}>取消</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={[styles.bottomBtn,{backgroundColor:'#FFE000',marginLeft:12}]}
              onPress={() => { 
                
                this.props.onSure()
               }}>
                <Text style={styles.bottomBtnText}>确定</Text>
            </TouchableOpacity>

          </View>
          

        </Animated.View>
      </View>
    );
  }
  

}

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    justifyContent: 'center',
    alignItems: 'center'
  },
  overlay: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  contentContainer: {

    backgroundColor: '#fff',

    borderRadius: 8,
    paddingLeft: 24,
    paddingRight: 24,
    flexDirection: 'column',
    alignItems: 'center',
    width: SCREEN_WIDTH * 0.8
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 15,

  },
  title: {
    fontSize: 18,
    fontWeight: '500',
    color: '#333',
  },
  desText: {
    fontSize: 16,
    color: '#333333',
    fontWeight: '500'
  },
  reasonBg: {
    backgroundColor: '#F9F9F9',
    borderRadius: 6,
    marginTop: 8,
    paddingHorizontal: 10,
    paddingVertical: 12,
  },

  tipsImg: {
    width: 40,
    height: 40,
    marginTop: 20,
    marginBottom: 8
  },

  
  checkImg:{
    width: 20,
    height: 20
  },
  itemCheckContain:{
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 12
  },
  itemText:{
    marginLeft: 8,
    fontSize: 16,
    color: '#333'
  },

  bottomBtnContain: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginTop:24,
    marginBottom: 24
  },
  bottomBtn: {
    flex:1,
    height: 40,
    borderRadius: 4,
    justifyContent: 'center',
    alignItems: 'center'
  },
  bottomBtnText: {
    fontSize: 16,
    color: '#333333',
    fontWeight: '500'
  },

  selectReasonBg: {
    marginTop: 8,
    width: '100%',
    height: 56,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  selectReasonBox: {
    flex: 1,
    height: '100%',
    borderBottomColor: '#E7E7E7',
    borderBottomWidth: 0.5,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'flex-start'
  },
  selectReasonText: {
    fontSize: 16,
  },
  arrowImg:{
    marginLeft: 16,
    width: 16,
    height: 16
  },
  reasonPopBg: {
    width: '100%',
    flexDirection: 'column',
    borderRadius: 8,
    backgroundColor: '#fff',
    position: 'absolute',
    top: 185,
    paddingHorizontal: 16,

    elevation: 4,  //  设置阴影角度，通过这个设置有无阴影（这个是最重要的，决定有没有阴影）
    shadowColor: '#808080',  //  阴影颜色
    shadowOffset: { width: 0, height: 2 },  // 阴影偏移
    shadowOpacity: 0.2,  // 阴影不透明度
    shadowRadius: 4,
  },
  reasonPopItemBox: {
    width: '100%',
    height: 56,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderBottomColor: '#E7E7E7',
    borderBottomWidth: 0.5
  },
  reasonPopItemText: {
    fontSize: 16,
    color: 'rgba(0,0,0,0.9)'
  },
  radioImg: {
    width: 24,
    height: 24
  }
});

export default ConfirmPayPop;